/**
 * Created by ren on 08/04/2017.
 */
import React, {Component} from 'react'
import {Footer, Button, FooterTab, Icon, Text} from 'native-base';
import NavigationDrawer from '../components/NavigationDrawer'
import Order from '../views/Order'
import Account from '../views/Account'
import Person from '../views/Person'
import {connect}  from 'react-redux'
import {cutTab, resetBrand} from '../actions'
import PageUtil from '../utils/PageUtil';
class VFooter extends Component {
  constructor(props) {
    super(props);
    this.PageUtil = new PageUtil();
    this.state = {
      title: 'checkOrder',
    }
  }

  cutTab(tabName) {
    const {dispatch} =this.props;
    dispatch(cutTab(tabName))
    dispatch(resetBrand())
    switch (tabName) {
      case 'checkOrder':
        this.PageUtil.replacePageWithComponent(NavigationDrawer)
        break
      case 'order':
        this.PageUtil.replacePageWithComponent(Order)
        break
      case 'account':
        this.PageUtil.replacePageWithComponent(Account)
        break
      case 'person':
        this.PageUtil.replacePageWithComponent(Person)
        break
    }
  }

  render() {
    const {title}=this.props

    return (
      <Footer>
        <FooterTab style={{backgroundColor:'#EDEDED'}}>
          <Button onPress={(tabName)=>this.cutTab('checkOrder')}>
            <Icon active={title==='checkOrder'?true:false}
                  style={title==='checkOrder'?styles.activeColor:styles.unActiveColor} name="ios-briefcase"/>
            <Text style={title==='checkOrder'?styles.activeColor:styles.unActiveColor}>接单</Text>
          </Button>
          <Button onPress={(tabName)=>this.cutTab('order')}>
            <Icon active={title==='order'?true:false} style={title==='order'?styles.activeColor:styles.unActiveColor}
                  name="ios-paper"/>
            <Text style={title==='order'?styles.activeColor:styles.unActiveColor}>订单</Text>
          </Button>
          <Button onPress={(tabName)=>this.cutTab('account')}>
            <Icon active={title==='account'?true:false}
                  style={title==='account'?styles.activeColor:styles.unActiveColor}
                  name="md-calculator"/>
            <Text style={title==='account'?styles.activeColor:styles.unActiveColor}>结算</Text>
          </Button>
          <Button onPress={(tabName)=>this.cutTab('person')}>
            <Icon active={title==='person'?true:false} style={title==='person'?styles.activeColor:styles.unActiveColor}
                  name="ios-person"/>
            <Text style={title==='person'?styles.activeColor:styles.unActiveColor}>我的</Text>
          </Button>
        </FooterTab>
      </Footer>
    )
  }
}
function select(store) {
  return {
    title: store.routesStore.cutTab
  }
}
export default connect(select)(VFooter)
const styles = {
  activeColor: {
    color: '#00A02A'
  },
  unActiveColor: {
    color: '#95989A'
  }
}